<template>
  <div style="background-color: whitesmoke;min-height: 100%">
    <Sticky>
      <NavBar title="订单" left-arrow @click-left="onRevoke"/>
    </Sticky>
    <div class="btn-ls">
      <div @click="clickBtn(item.index)" :class="{'cur-btn': isCur(item.index)}" v-for="item in orderFunc"
           :key="item.index">
        {{item.name}}
      </div>
    </div>
  </div>
</template>

<script>
import {Sticky, NavBar} from 'vant'

export default {
  name: 'OrderLs',
  components: {
    Sticky,
    NavBar
  },
  data () {
    return {
      orderFunc: [],
      curIndex: 'all'
    }
  },
  created () {
    this.orderFunc = [
      {
        name: '全部',
        index: 'all'
      },
      {
        name: '待付款',
        index: 'pay'
      },
      {
        name: '待发货',
        index: 'send'
      },
      {
        name: '待收货',
        index: 'receive'
      },
      {
        name: '评价',
        index: 'comment'
      }
    ]
    this.curIndex = this.$route.params.type
  },
  methods: {
    onRevoke () {
      this.$router.go(-1)
    },
    isCur (index) {
      return this.curIndex === index
    },
    clickBtn (index) {
      this.curIndex = index
    }
  }
}
</script>

<style scoped lang="less">

  .btn-ls {
    display: flex;
    justify-content: space-around;

    div {
      width: 16%;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 0.8rem;
    }

    .cur-btn {
      color: deepskyblue;
      border-bottom: deepskyblue 0.05rem solid;
    }

  }

</style>
